<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="changeName">更新name</button>
        <button v-on:click="destroyFn">销毁</button>
        <hr>
        姓名：{{name}}
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                name:'xiaoming'
            },
            methods:{
                changeName(){
                    this.name = 'ergou'
                },
                destroyFn(){
                    this.$destroy()
                }
            },
            beforeCreate(){
                console.group('---beforeCreate创建前---')
                console.log('el:'+this.$el)//undefined
                console.log('data数据中的name:'+this.name)//undefined
                console.groupEnd()
            },
            created(){
                console.group('---created创建完毕---')
                console.log('el:'+this.$el)//undefined
                console.log('data数据中的name:'+this.name)//xiaoming
                console.groupEnd()
            },
            beforeMount(){
                console.group('---beforeMount挂载前---')
                console.log('el:'+this.$el)//[object HTMLDivElement]
                console.log(this.$el)//虚拟节点
                console.log('data数据中的name:'+this.name)//xiaoming
                console.groupEnd()
            },
            mounted(){
                console.group('---mounted挂载完毕---')
                console.log('el:'+this.$el)//[object HTMLDivElement]
                console.log(this.$el)//真实节点
                console.log('data数据中的name:'+this.name)//xiaoming
                console.groupEnd()
            },
            beforeUpdate(){
                console.group('---beforeUpdate数据更新前---')
                console.log('el:'+this.$el)//[object HTMLDivElement]
                console.log(document.getElementById('app').innerHTML)//真实HTML节点结构
                console.log('data数据中的name:'+this.name)//ergou
                console.groupEnd()
            },
            updated(){
                console.group('---updated数据更新完毕---')
                console.log('el:'+this.$el)//[object HTMLDivElement]
                console.log(document.getElementById('app').innerHTML)//真实HTML节点结构
                console.log('data数据中的name:'+this.name)//ergou
                console.groupEnd()
            },
            beforeDestroy(){
                console.group('---beforeDestroy实例销毁之前---')
                console.log('el:'+this.$el)//[object HTMLDivElement]
                console.log(document.getElementById('app').innerHTML)//真实HTML节点结构
                console.log('data数据中的name:'+this.name)//xiaoming
                console.groupEnd()
            },
            destroyed(){
                console.group('---destroyed实例销毁完毕---')
                console.log('el:'+this.$el)//[object HTMLDivElement]
                console.log(document.getElementById('app').innerHTML)//真实HTML节点结构
                console.log('data数据中的name:'+this.name)//xiaoming
                console.groupEnd()
            }
        })
    </script>

    

</body>
</html>